<template>
	<view class="form-main">
		<u-form :model="form" ref="uForm" :error-type="['message']">
			<view class="form-column">
				<view class="form-title">账号信息（初始密码为用户账号）</view>
				<view class="form-box">
					<u-form-item label="用户账号" label-width="140rpx" prop="userName" required>
						<u-input class="form-input" v-model="form.userName" placeholder="请输入用户账号" />
					</u-form-item>
					<u-form-item label="所属角色" label-width="140rpx" prop="roleName" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="roleShow" @click="roleShow = true" placeholder="请选择所属角色" v-model="form.roleName" />
						</view>
						<u-select v-model="roleShow" mode="single-column" :list="roleList" value-name="id" label-name="name" @confirm="onConfirmRole"></u-select>
					</u-form-item>
					<u-form-item label="所属院区" label-width="140rpx" prop="deptName" required>
						<view class="u-flex select-box">
							<u-input class="u-flex-1 form-input" type="select" :select-open="courtyardShow" @click="courtyardShow = true" placeholder="请选择所属院区" v-model="form.deptName" />
						</view>
						<u-select v-model="courtyardShow" mode="single-column" :list="courtyardList" value-name="id" label-name="name" @confirm="onConfirmCourtyard"></u-select>
					</u-form-item>
					<u-form-item label="手机号码" label-width="140rpx" prop="phone">
						<u-input class="form-input" v-model="form.phone" placeholder="请输入手机号码" />
					</u-form-item>
					<u-form-item label="真实姓名" label-width="140rpx" prop="nickName">
						<u-input class="form-input" v-model="form.nickName" placeholder="请输入真实姓名" />
					</u-form-item>
					<u-form-item label="用户性别" label-width="140rpx" prop="sex">
						<u-radio-group v-model="form.sex" style="display: flex;width: 100%;">
							<u-radio
								v-for="(item, index) in sexList" :key="index" 
								:name="item.name"
								style="flex: 1;"
							>
								{{item.value}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
					<u-form-item label="电子邮箱" label-width="140rpx" prop="email">
						<u-input class="form-input" v-model="form.email" placeholder="电子邮箱" />
					</u-form-item>
					<u-form-item label="是否启用" label-width="140rpx" prop="enable">
						<u-radio-group v-model="form.enable" style="display: flex;width: 100%;">
							<u-radio
								v-for="(item, index) in enableList" :key="index" 
								:name="item.name"
								style="flex: 1;"
							>
								{{item.value}}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
			</view>
		</u-form>
		<view class="u-margin-top-30" @click="submitAction">
			<animate-button ref="animeBtn" :btn-text="type == 0 ? '添加' : '修改'"></animate-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					userName: '',
					phone: '',
					nickName: '',
					roleIds: '',
					roleName: '',
					deptId: '',
					deptName: '',
					email: '',
					sex: 0,
					enable: 1
				},
				rules: {
					userName: [
						{
							required: true,
							message: '请输入用户账号！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						}
					],
					roleName: [
						{
							required: true,
							message: '请选择所属角色！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						}
					],
					deptName: [
						{
							required: true,
							message: '请选择所属院区！', 
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur']
						}
					]
				},
				id: null,
				type: null,

				roleShow: false,
				roleList: [],
				
				courtyardShow: false,
				courtyardList: [],
				
				sexList: [
					{
						name: 1,
						value: '男'
					},
					{
						name: 2,
						value: '女'
					},
					{
						name: 0,
						value: '保密'
					}
				],
				enableList: [
					{
						name: 1,
						value: '启用'
					},
					{
						name: 2,
						value: '禁用'
					},
				],
			};
		},
		onLoad() {
			const {
				type,
				id
			} = this.$Route.query;
			this.id = id;
			this.type = type;
			if (type == 1) {
				this.getDetail(id)
			}
			uni.setNavigationBarTitle({
				title: type == 0 ? '新增账号' : '编辑账号'
			})
			this.getDepList()
			this.getRoleList()
		},
		methods: {
			getDetail(id) {
				this.$api.userDetails({
					id
				}).then(res => {
					let d = res.data
					this.id = d.userId
					this.form = {
						userName: d.userName,
						phone: d.phone,
						nickName: d.nickName,
						roleIds: d.roleIds,
						roleName: d.roleName,
						deptId: d.deptId,
						deptName: d.deptName,
						sex: d.sex,
						email: d.email,
						enable: d.enable,
					}
					// if (this.form.factoryImg) {
					// 	this.fileList = [{
					// 		"url": this.form.factoryImg,
					// 		"progress": 100,
					// 		"error": false
					// 	}]
					// }
				})
			},
			getRoleList() {
				this.$api.role({
					current: 1,
					size: 999
				}).then(res => {
					let data = res.data
					for (let i of data) {
						this.roleList.push({
							name: i.roleName,
							id: i.roleId
						})
					}
				})
			},
			getDepList() {
				this.$api.deptList({
					current: 1,
					size: 999
				}).then(res => {
					let data = res.data
					for (let i of data.records) {
						this.courtyardList.push({
							name: i.deptName,
							id: i.deptId
						})
					}
				})
			},
			onConfirmRole(item){
				this.form.roleIds = item[0].value;
				this.form.roleName = item[0].label;
			},
			onConfirmCourtyard(item){
				this.form.deptId = item[0].value;
				this.form.deptName = item[0].label;
			},
			submitAction() {
				if (this.$refs.animeBtn.status != 1) return
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.animeBtn.loading()
						let params = this.type == 0 ? { userId: 0, password: this.form.userName } : { userId: this.id }
						this.$api.userAddOrUpdate({
							...this.form,
							...params,
						}).then(res => {
							this.$refs.animeBtn.success()
							this.$refs.uToast.show({
								title: this.type == 0 ? '添加成功' : '修改成功',
								type: 'success',
								back: true,
								duration: 1500,
								callback: () => {
									this.$fallback(1, {
										key: 'reset'
									})
								}
							});
						}).catch(() => {
							this.$refs.animeBtn.fail()
							setTimeout(()=> {
								this.$refs.animeBtn.reset()
							}, 3000)
						})
					} else {
						return
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style>
	.select-box{
		width: 100%;
	}
</style>
